<!--
 * @Author: 曹捷
 * @Date: 2020-06-16 19:31:35
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-09-28 15:20:13
 * @Description: 骨架屏（灵活-加载快-css-动画
-->
<template>
  <view>
    <view :class="{ animate: animate }" :style="{ justifyContent: flexType }" class="skeleton column" v-show="skValue">
      <!-- 轮播图 -->
      <view :key="item" class="skeleton-imgTitle" v-for="item in imgTitle"></view>
      <div :key="'textRow' + i" :style="{ justifyContent: flexType }" class="m-b-40 flex" style="width:100%;" v-for="i in textRow">
        <!-- 头像图 -->
        <template v-if="showAvatar && !imgTitle">
          <view :class="[avatarShape]" :key="'head' + index" :style="{ width: avatarSize, height: avatarSize }" class="skeleton-avatar" v-for="(item, index) in nameRow"></view>
        </template>
        <!-- 文字条 -->
        <view class="skeleton-content" v-if="showTitle && !imgTitle">
          <view :style="{ width: titleWidth }" class="skeleton-title"></view>
          <view class="skeleton-rows">
            <view :key="'rowList' + index" :style="{ width: item.width }" class="skeleton-row-item" v-for="(item, index) in rowList"></view>
          </view>
        </view>
      </div>
    </view>
    <view v-show="!skValue">
      <slot></slot>
    </view>
  </view>
</template>

<script>
const DEFAULT_ROW_WIDTH = '100%'
const DEFAULT_LAST_ROW_WIDTH = '60%'
import { mapGetters } from 'vuex'

export default {
  name: 'skeleton',
  computed: {
    ...mapGetters(['loading', 'requestd']),
    rowList() {
      let list = []
      for (let i = 0; i < this.row; i++) {
        list.push({
          width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH,
        })
      }
      return list
    },
  },
  watch: {
    loading(value) {
      this.skValue = value
    },
    requestd(value) {
      // console.log('requestd -> value', value)
      if (!value) {
        this.skValue = value
      }
    },
  },
  props: {
    imgTitle: { type: Number, default: 0 },
    nameRow: { type: Number, default: 1 },
    /**
     * 内容 文本  展示个数
     */
    textRow: { type: Number, default: 1 },
    flexType: {
      type: String,
      default: 'flex-start', // center	居中	√		space-between	两端对齐	√		space-around	子元素拉手分布	√		flex-start	居左		flex-end	居右
    },
    /**
     * 是否显示头像占位图
     */
    showAvatar: {
      type: Boolean,
      default: true,
    },
    /**
     * 头像站占位图大小
     */
    avatarSize: {
      type: String,
      default: '50px',
    },
    /**
     * avatarShape
     */
    avatarShape: {
      type: String,
      default: 'round', // square | round
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否显示标题占位图
     */
    titleWidth: {
      type: String,
      default: '40%',
    },
    row: {
      type: Number,
      default: 4,
    },
    animate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      skValue: true,
    }
  },
}
</script>

<style scoped>
.skeleton {
  display: flex;
  margin: 16px;
  /* flex-direction: column; */
  --bg-color: #e1e2e5;
  --row-height: 16px;
  --row-margin-top: 16px;
}
.flex {
  display: flex;
}
.column {
  flex-direction: column;
}
.skeleton-imgTitle {
  flex-wrap: wrap;
  background: var(--bg-color);
  margin: 10px auto;
  width: 100%;
  border-radius: 10px;
  height: 260rpx;
  display: block;
}
.skeleton-avatar {
  flex-shrink: 0;
  background: var(--bg-color);
  margin-right: 8px;
}
.skeleton-avatar.round {
  border-radius: 50%;
}

.skeleton-content {
  width: 100%;
}

.skeleton-title {
  background-color: var(--bg-color);
  height: var(--row-height);
}

.skeleton-title + .skeleton-rows {
  margin-top: var(--row-margin-top);
}

.skeleton-rows {
}

.skeleton-row-item {
  background-color: var(--bg-color);
  height: var(--row-height);
}
.skeleton-row-item:not(:first-child) {
  margin-top: var(--row-margin-top);
}

.skeleton.animate {
  animation: skeleton-blink 1.2s ease-in-out infinite;
}

@keyframes skeleton-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
